<template>
	<view class="content">
		<map id="houseMap" :latitude="latitude" :longitude="longitude" scale="12" :markers="markers"
			@markertap="markertap"></map>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import staticData from '../../static/data';
	const mapContext = uni.createMapContext('houseMap')
	const latitude = ref(staticData.latitude)
	const longitude = ref(staticData.longitude)
	let markers = ref([])

	const transToMarkers = () => {
		if (staticData.plotsList) {
			let markers = []
			staticData.plotsList.forEach((item, index) => {
				markers.push({
					id: index,
					iconPath: '/static/logo.png',
					width: 20,
					height: 20,
					latitude: item.latitude,
					longitude: item.longitude,
					label: {
						x: 0,
						y: 0,
						content: item.name,
						bgColor: '#e30062',
						color: '#ffffff',
						fontSize: 12,
						padding: 5,
						borderRadius: 6
					},
				})
			})
			return markers
		} else return []
	}

	const markertap = (e) => {
		uni.navigateTo({
			url: '/pages/detail/detail?target=' + e.detail.markerId
		})
	}

	markers.value = transToMarkers()
</script>

<style lang="less" scoped>
	.content {
		#houseMap {
			position: relative;
			height: 95vh;
			width: 95vw;

			.cover-avatar-box {
				color: #fff;
				height: 68rpx;
				width: 68rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				line-height: 68rpx;
				text-align: center;
				color: red
			}
		}
	}
</style>